<template>
  <div class="give">
    <div class="content">
      <div class="give_title">
        <h4>额度介绍</h4>
      </div>
      <!-- 额度列表，循环展示每个充值套餐 -->
      <div class="list">
        <div class="list_item" v-for="item in giveList" :key="item.id">
          <div class="list_content">
            <!-- 套餐图标 -->
            <div class="species">
              <img src="@assets/img/recharge/species.png" alt="" />
            </div>
            <!-- 套餐信息文本 -->
            <div class="text">
              <p class="tokens">{{ item.tokensTitle }}</p>
              <p class="unit">价格</p>
              <p class="unit_price">
                <span class="price">{{ item.price }}</span>
                <span class="currency">元</span>
              </p>
            </div>
            <!-- 立即购买按钮，点击后显示支付弹窗 -->
            <button class="buy_button" @click="showPayment(item)">
              立即购买
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 支付弹窗 -->
    <div class="payment" v-show="isShow">
      <div class="payment_content">
        <div class="exit">
          <div class="exit-btn" @click="hidePayment">
            <img src="@/assets/img/exit.png" alt="" />
          </div>
        </div>
        <div class="select">
          <p>请选择支付方式</p>
        </div>
        <div class="payment_method">
          <div
            class="payChat"
            v-for="item in paymentList"
            :key="item.id"
            @click="pamentChange(item)"
            :style="{
              border:
                paymentActive === item.id
                  ? !item.id
                    ? '2px solid #28C445'
                    : '2px solid #1296DB'
                  : '1px solid #E0E0E0',
            }"
          >
            <img :src="item.img" alt="" />
            <p>{{ item.label }}</p>
          </div>
        </div>
        <div class="container">
          <div class="image-container">
            <img :src="imgUrl" alt="二维码" />
          </div>
          <div class="info-container">
            <p class="countdown">充值倒计时：{{ formattedTime() }}</p>
            <p class="price">
              ￥{{ selectedPackage.price
              }}<del>￥{{ selectedPackage.price }}</del>
            </p>
            <p class="disclaimer">
              请使用“支付宝”支付，充值即代表同意《<span>鹿线AI用户协议</span>》
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount, onBeforeUnmount, computed } from 'vue'
import { getpackage, IgetPackage, alipayScanPay, wxpayNative, tokensOrder } from '@api/account'
import img1 from '@assets/img/recharge/WeChat.png'
import img2 from '@assets/img/recharge/Alipay.png'
import QRCode from 'qrcode'

// 定义充值套餐变量
let giveList = ref<IgetPackage[]>([])
let isShow = ref<boolean>(false) // 支付弹窗的显示隐藏
const selectedPackage = reactive<Partical<IgetPackage>>({}) // 选中的套餐
const paymentList = ref([
  {id: 0, label: '微信支付', img: img1},
  {id: 1, label: '支付宝支付', img: img2}
])
const orderNumber = ref<number>(0)
let imgUrl = ref('')
let paymentActive = ref(0)
const state = reactive({
  timer: 60,
  active: false // 是否正在倒计时
})
const orderCloseTimer = ref() // 倒计时剩下的时间
const paymentTimer = ref() // 短轮询时间

onBeforeMount(async () => {
  let res = await getpackage()
  try {
    if (res.code != 0) return
    giveList.value = res.data
  } catch(err) {
    console.log(err)
  }
})
const showPayment = (item: IgetPackage) => {
  isShow.value = true
  // 选中的套餐信息
  Object.assign(selectedPackage, item) // 把信息复制到选中套餐
  getWxPay(item.id) // 默认微信支付
}
const getWxPay = async (id: number) => {
  let res = await wxpayNative(id)
  let { codeUrl, orderNo } = res.data
  orderNumber.value = orderNo
  generateQRCode(codeUrl)
}
const getAliPay = async (id: number) => {
  let res = await alipayScanPay(id)
  let { codeUrl, orderNo } = res.data
  orderNumber.value = orderNo
  generateQRCode(codeUrl)
}
// 展示二维码，生成二维码并进行渲染
const generateQRCode = (url: string) => {
  if (url) {
    QRCode.toDataURL(url, (err, dataURL) => {
      if (err) {
        console.log(err)
        return
      }
      imgUrl.value = dataURL
      startTimer() // 开始倒计时
      newTimeFun() // 短轮询查看订单状态
    })
  }
}
const pamentChange = (item) => {
  paymentActive.value = item.id
  closeTimer()
  if (paymentActive.value) {
    getAliPay(selectedPackage.id as number)
  } else {
    getWxPay(selectedPackage.id as number)
  }
}
// 倒计时
const formattedTime = () => computed(() => {
  let minutes = Math.floor(state.timer / 60)
  let seconds = state.timer % 60
  return `${String(minutes).padStart(2, '0')}分 ${String(seconds).padStart(2, '0')}秒`
})
// 开始倒计时
const startTimer = () => {
  state.timer = 60
  state.active = true // 是否正在倒计时，是个flag
  clearInterval(orderCloseTimer.value) // 关闭倒计时
  // 时间倒计时减少
  orderCloseTimer.value = setInterval(() => {
    if (state.timer > 0) {
      state.timer --
    } else {
      // 时间等于0，没有在倒计时；关闭倒计时
      state.active = false 
      // clearInterval(orderCloseTimer.value)
      // 时间到了，关闭所有定时器函数
      closeTimer()
    }
  }, 1000)
}
// 查询订单状态
const paymentOrder = async () => {
  let res = await tokensOrder(orderNumber.value)
  let { status } = res.data
}
// 短轮询查看订单状态
const newTimeFun = () => {
  paymentTimer.value = setInterval(paymentOrder, 1000)
}
// 关闭定时器
const closeTimer = () => {
  clearInterval(orderCloseTimer.value) // 倒计时关掉
  clearInterval(paymentTimer.value) // 短轮询关掉
  console.log('orderCloseTimer.value):', orderCloseTimer.value)
  console.log('paymentTimer.value:', paymentTimer.value)
}
const hidePayment = () => {
  isShow.value = false
  closeTimer()
}
</script>

<style lang="scss" scoped>
.give {
  width: 100%;
  height: 100%;
  padding: 21px 47px;
  background: #fff;
  border-radius: 0.5vw;
  box-sizing: border-box;

  .content {
    flex: 1;

    .give_title {
      h4 {
        font-size: 18px;
        font-weight: bold;
        color: #232323;
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      .list_item {
        flex: 0 0 25%;
        height: 15vw;
        padding: 0 1vw 1vw 1vw;
        box-sizing: border-box;
        display: flex;

        .list_content {
          flex: 1;
          position: relative;
          padding: 0 2vw 1.8vw;
          border-radius: 1vw;
          border: 1px solid #e9e9e9;
          box-shadow: 0px 2vw 2vw 0.5vw rgba(145, 145, 145, 0.1216);

          .species {
            width: 5vw;
            height: 5vw;
            position: absolute;
            top: 1vw;
            right: 1vw;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .text {
            border-bottom: 0.2vw solid #eeeeee;
            margin-bottom: 1vw;
          }

          .tokens {
            margin: 2vw 0 1vw;
            font-weight: bold;
            font-size: 1vw;
            line-height: 1vw;
            color: #333333;
          }

          .unit {
            margin-bottom: 1vw;
            font-weight: 400;
            font-size: 0.8vw;
            color: #999999;
          }

          .unit_price {
            margin-bottom: 1vw;

            .price {
              font-weight: bold;
              font-size: 2vw;
              color: #dc985e;
            }

            .currency {
              font-size: 1vw;
              color: #dc985e;
            }
          }

          .buy_button {
            width: 100%;
            height: 3vw;
            line-height: 3vw;
            border-radius: 0.2vw;
            font-size: 1.5vw;
            background: linear-gradient(180deg, #fcc994 0%, #f6a967 100%);
            color: white;
            border: none;
            cursor: pointer;
          }
        }
      }
    }
  }

  .payment {
    width: 100vw;
    height: 100vh;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    bottom: 0;

    .payment_content {
      width: 50vw;
      height: 34vw;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-top: -17vw;
      margin-left: -25vw;
      padding: 0 3vw 0 4vw;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 2vw;

      .exit {
        height: 5vw;
        display: flex;
        align-items: center;
        justify-content: right;

        .exit-btn {
          width: 2vw;
          height: 2vw;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .select {
        height: 2vw;
        display: flex;
        align-items: center;
        justify-content: left;
        margin-bottom: 2vw;

        p {
          font-weight: 400;
          font-size: 1.5vw;
          color: red;
        }
      }

      .payment_method {
        width: 100%;
        height: 6vw;
        margin-bottom: 2vw;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .Alipay {
          width: 45%;
          height: 6vw;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          border-radius: 1vw;

          p {
            font-weight: 400;
            font-size: 1.5vw;
            color: red;
          }

          img {
            width: 2vw;
            height: 2vw;
            margin-right: 1vw;
          }
        }

        .payChat {
          width: 45%;
          height: 6vw;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          border-radius: 1vw;

          p {
            font-weight: 400;
            font-size: 1.5vw;
            color: red;
          }

          img {
            width: 2vw;
            height: 2vw;
            margin-right: 1vw;
          }
        }
      }

      .container {
        display: flex;
        justify-content: space-between;
        padding: 0.4vw;

        .image-container {
          flex: 0 0 30%;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .info-container {
          flex: 1;

          .countdown {
            height: 1.4vw;
            line-height: 1vw;
            font-weight: 400;
            font-size: 1.4vw;
            color: #bfbfbf;
            margin-bottom: 2vw;
          }

          .price {
            height: 4vw;
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 4vw;
            color: red;
            margin-right: 1vw;
            margin-bottom: 3vw;

            del {
              font-weight: 400;
              font-size: 2vw;
              color: #bfbfbf;
            }
          }

          .disclaimer {
            font-weight: 400;
            font-size: 1vw;
            color: red;

            span {
              color: red;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
